<include file="public@header" />
<link rel="stylesheet" href="__STATIC__/libs/layui/css/layui.css" type="text/css">

    <body>
        <div class="wrap" style="margin-left: 0px;margin-top:0px;">      
            <div class="layui-tab">
                <ul class="layui-tab-title">
                  <li class="layui-this" data-url='/admin/upload/index'>批量上传</li>
                  <li>日志管理</li>
                </ul>               
              </div>
       

                <form id="" class="layui-form"  method="post">
                    <div class="server">
                        <legend style="margin-bottom:none !important;">目录结构展示</legend>
                        <div id="test1" class="demo-tree demo-tree-box" style="float:left;"></div>
                        <div id="test2" class="demo-tree demo-tree-box" style="float:left;margin-left: 50px;"></div>
                        <div id="test3" style="float:left;margin-left: 50px;">

                            注:1.请严格按照该目录结构来上传文件夹；<br>
                            2.产品分类存在是非必须的；<br>
                            3.图片名称即为产品名称；<br>
                            4.图片名称所在的父级目录则为产品分类名称；

                        </div>
                        <div style="clear:both;"></div>
                        <legend style="margin-bottom:none !important;">上传文件夹</legend>

                        <div class="layui-form-item">
                            <label class="layui-form-label">上传类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="uploadType" lay-filter="testRadio" value="1" title="文件夹" checked=""/>
                                <input type="radio" name="uploadType" lay-filter="testRadio" value="2" title="图片"/>
                                <input type="radio" name="uploadType" lay-filter="testRadio" value="禁" title="禁用" disabled=""/>
                            </div>

                        </div>
                        <div class="folders-upload">
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择框</label>
                                <div class="file">
                                    <a style='display: inline-block;color:#fff;height:40px;width:113px;line-height: 40px;text-align: center;'>上传文件夹</a>
                                    <input id='fileFolder' type="file" lay-filter="foldersUpload" class=""  multiple webkitdirectory/>         
                                    <span id="msg" style="color:#F00"></span>
                                </div>
                                <div class="layui-folder-upload-list layui-upload-list" style="display:none;margin-left: 108px;">
                                    <table class="layui-table">
                                        <thead>
                                            <tr><th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                            </tr></thead>
                                        <tbody id="folder-upload-list">
                                            
                                            
                                        </tbody>
                                    </table>
                                </div>  
                            </div>
                            <style>
                                .file {
                                    width:113px;
                                    height:40px;
                                    position: relative;
                                    display: inline-block;
                                    background: #D0EEFF;
                                    border: 1px solid #99D3F5;
                                    border-radius: 4px;
                                    overflow: hidden;
                                    color: #fff;
                                    text-decoration: none;
                                    text-indent: 0;
                                    line-height: 20px;
                                    background-color: #009688;
                                }
                                .file input {
                                    position: absolute;
                                    font-size: 100px;
                                    right: 0;
                                    top: 0;
                                    opacity: 0;
                                }
                            </style>
                        </div>

                        <div class="photos-upload" style="display:none;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-block">
                                    <select name="product_type" lay-verify="required" lay-filter="product_type">      
                                        <option value="0">请选择</option>
                                        <option value="1">产品</option>
                                        <option value="2">案例</option>
                                        <option value="3">新闻</option>
                                    </select>
                                </div>
                            </div>
                           
                            <div class="layui-form-item" id="class" style="display:none;">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="class_id" lay-verify="required">
                                      
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择框</label>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="multi-upload-photo">多图片上传</button>                                     
                                </div>
                                <div class="layui-upload-list" style="display:none;margin-left: 108px;">
                                    <table class="layui-table">
                                        <thead>
                                            <tr><th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                            </tr></thead>
                                        <tbody id="demoList">
                                        </tbody>
                                    </table>
                                </div>  
                            </div>
                        </div>
                        <div id="js-response-tips" style="display: none;"></div>
                    </div>
                    <div class="bottom text-center">
                        <div class="layui-form-item">
                            <div class="layui-input-block">             
                                <input type="hidden" name="folder_img_count" value="0">
                                <input type="hidden" name="token" value="{$token|default=''}">
                              <button id="own-submit" class="layui-btn "  lay-submit lay-filter="formDemo">立即提交</button>
                              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                          </div>
                    </div>
                    <div class="image-input-list">
                    </div>
                </form>
    
            <script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
        <script src="__STATIC__/libs/layui/layui.js"></script>
        <script src="__STATIC__/js/jquery.js"></script>
            <script>
                var upload_img_count = 0;
                $('.layui-tab li').on('click',function(){
                    var that= this;
                    var url = $(that).data('url');
                          
                    $('.layui-tab li').each(function(){
                        $(this).removeClass('layui-this');                    
                    });                                              
                    $(that).addClass('layui-this')
                    
                    
                    $(parent.document.getElementById("myiframe")).attr('src',url);
                })

                layui.use(['tree', 'util', 'upload', 'form','layer'], function () {
                    var layer = layui.layer;
                    


                    $('#fileFolder').on('change', function (e) {                        
                        var files = e.target.files; // FileList  
                       
                        var dealType = 2; 
                        var count = files.length;
                        if(dealType == 1){ //自己封装的处理图片
                            var index = layer.load(0, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                              });
                        }else if(dealType == 2){
                            var index = layer.msg('正在处理图片，总共'+ count +'个,预计耗时'+count +'秒', {
                                icon: 16
                                ,shade: [0.1]
                                ,time:0
                            });                           
                        }
                        


                        var timer = setInterval(function(){
                            if($('input[name=folder_img_count]').val() == count){                                   
                                layer.close(index);
                                clearInterval(timer);
                            }
                        },1000);
                        
                        $('.layui-folder-upload-list').show();
                        for (var i = 0, f; f = files[i]; ++i) {       
                            if(dealType == 2){
                                originDealUploadImage(f,i,dealType);
                            }else if(dealType == 1){
                                ownDealUploadImage(f,i,dealType);
                            }                            
                        }
                        
                        
                    })
                    
                    
                    

                    var tree = layui.tree
                            , util = layui.util
                            , upload = layui.upload
                            , form = layui.form
                            , data = []
                            , data1 = [];
                    //常规用法
//                    tree.render({
//                        elem: '#test1' //默认是点击节点可进行收缩
//                        , data: data
//                    });
//                    tree.render({
//                        elem: '#test2' //默认是点击节点可进行收缩
//                        , data: data1
//                    });
                    
                    upload.render({
                        elem: '#multi-upload-photo'
                        , url: '/admin/upload/swfupload' //改成您自己的上传接口
                        , multiple: true
                        , before: function (obj) {                            
                            //预读本地文件示例，不支持ie8
                            $('.layui-upload-list').show();
                            
                        }
                        , done: function(res, index, upload){
                            var response_status = 'Fail';
                            if(res.code == '1'){
                                setImageInput(res.data,index);
                                response_status = 'Success';
                            }
                            
                            if(index <10){
                                $('#demoList').append("<tr><td>" + res.data.name + "</td><td>" + res.data.filesize + "</td><td>"+response_status+"</td></tr>");
                            }else if(index == 10){
                                $('#demoList').append("<tr><td colspan='3'> 注:默认只展示10条记录上传状态 </td></tr>");
                            }
                            
                            //上传完毕
                        }
                    });
                    
                    
                    form.on('submit(formDemo)',function(data){
                        
                        var title = '<p style="font-size:16px;font-weight:600;text-align:center;">请记住此口令</p>';
                            title += '<p>口令:'+$('input[name=token]').val()+'</p>';
                            title += '<p style="color:red;">注意:口令是查找错误的唯一标识</p>';
                        layer.confirm(title, {
                            btn: ['重要'] //按钮
                        }, function(){
                            var index = layer.load(0, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                              });
                            $.ajax({
                                type:'POST',
                                url:'/admin/save_table/doSaveTable',
                                data:data.field,
                                success:function(res){                                
                                    layer.close(index);
                                   layer.msg(res.info)

                                }                            
                            });
                        });
                        
                        
                        return false;
                    })


                   
                  form.on('select(product_type)', function(data){                                                                                                                    
                        initClassSelect();    
                         $('#class').show();
                  });
                    
                form.on('radio(testRadio)', function (data) {
                    $('.image-input-list').html('');
                    if (data.value == 2) {
                        $('#folder-upload-list').html('');
                        $('.layui-folder-upload-list').hide();
                        $('.photos-upload').show();
                        $('.folders-upload').hide();
                    } else {
                        $('#demoList').html('');
                        $('.layui-upload-list').hide();
                        $('.photos-upload').hide();
                        $('.folders-upload').show();
                    }
                });

                function setImageInput(fileInfo,index){
                        var inputHtml = "<input type='hidden' name='image["+index+"][path]' value='"+fileInfo.filepath+"'/>";
                            inputHtml += "<input type='hidden' name='image["+index+"][name]' value='"+fileInfo.name+"'/>";
                        $('.image-input-list').append(inputHtml);
                       
                    }
                    
                function printFile(file,index) {

                    return new Promise(function (resolve, reject) {
                        
                        let reader = new FileReader()
                        reader.readAsDataURL(file)
                        reader.onload = function () {
                            resolve({
                                photo_base64: this.result,
                                path: file.webkitRelativePath,
                                index :index,
                                token:$('input[name=token]').val()
                            })
                        }
                        
                    });
                }



                function ownDealUploadImage(f,i){
                    printFile(f,i).then(fileInfo=>{
                        $.ajax({
                            type:'POST',
                            url:'/admin/upload/base64ToImage',                                               
                            data:fileInfo,
                            async:false, 
                            success:function(res){   
                                  var response_status = 'Fail';
                                 if(res.code == '1'){
                                     response_status = 'Success'
                                 }
                                 upload_img_count = upload_img_count + 1;
                                 if(upload_img_count<10){
                                     $('#folder-upload-list').append("<tr><td>" + res.data.name + "</td><td>" + res.data.filesize + "</td><td>"+response_status+"</td></tr>");
                                 }else if(upload_img_count == 10){
                                     $('#folder-upload-list').append("<tr><td colspan='3' style='color:red;'> 注:默认只展示10条记录上传状态 </td></tr>");
                                 }
                                 setImageInput(res.data,fileInfo.index)
                                 $('input[name=folder_img_count]').val(upload_img_count)
                            }
                        })

                    });
                }

                function originDealUploadImage(f,i){
                    
                    var formData = new FormData();
                    formData.append('file',f);
                    formData.append('path',f.webkitRelativePath);
                    formData.append('token',$('input[name=token]').val());

                    $.ajax({
                        type:'POST',
                        url:'/admin/upload/swfupload',                                               
                        data:formData,
                        processData : false,
                        contentType : false, 
                        async:true,
                        success:function(res){       
                             var response_status = 'Fail';
                            if(res.code == '1'){
                                response_status = 'Success'
                            }
                            
                            upload_img_count =  upload_img_count + 1;
                            console.log(upload_img_count)
                            if(upload_img_count <10){                                            
                                $('#folder-upload-list').append("<tr><td>" + res.data.name + "</td><td>" + res.data.filesize + "</td><td>"+response_status+"</td></tr>");
                            }else if(upload_img_count == 10){
                                $('#folder-upload-list').append("<tr><td colspan='3' style='color:red;'> 注:默认只展示10条记录上传状态 </td></tr>");
                            }
                            setImageInput(res.data,upload_img_count)
                            $('input[name=folder_img_count]').val(upload_img_count)
                       }
                    })
                    
                    
                }

                    
                function initClassSelect(){
                    var index = layer.load(0, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                      });
                    var product_type = $('select[name=product_type]').val();                        
                    $.ajax({
                        type:'POST',
                        url:'/admin/save_table/getClassByRequestType',
                        data:{
                            product_type:product_type
                        },
                        success:function(res){                                
                            var data = res.data.class_list;
                            var html = '';
                            for (var i = 0; i < data.length; i++) { 
                                html +=  '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                             }
                            $('select[name=class_id]').html(html);
                            form.render();
                            layer.close(index)
                        }
                    });
                }
            })
            </script>

        </div>

</html>